<template>
  <div class="m-login">
    <h1>
      <img class="logo-small" src="../assets/logo.png" @click="$router.push('/')" style="cursor: pointer;"/> 
    </h1>    
    <div class="main-wrap">
      <img class="main-img" src="../assets/pg.png" />
      <div class="forget-container clearfix">
        <w-form-validate @on-validate="onValidate">
          <div class="forget-wrap fr">
            <div class="main-pad">
              <h3>找回密码</h3>
            <div class="input-box phone">
              <w-input type="text"
                v-model="username"
                holder="请输入手机号码"
                rule="isEmpty|isMobile"
                error="请输入手机号码|手机号码错误"
                :maxlength="11"
                @on-change="onChange">
              </w-input>
            </div> 
            <div class="input-box clearfix code">
              <w-input class="fl input-pwd"
                type="text"
                v-model="smsCode"
                holder="请输入验证码"
                rule="isEmpty|isCode"
                error="请输入验证码|验证码错误"
                :maxlength="6">
              </w-input>
              <button class="fr btn-ghost"
                ref="msgCode"
                type="button"
                :class="classType"
                :disabled="classType === 'disabled'"
                @click="getCode">
                获取短信验证码
              </button>
            </div> 
            <div class="input-box password">
              <w-input type="password"
                v-model="password"
                holder="请设置密码"
                rule="isEmpty|isPassword"
                error="请设置密码|密码为6到16位数字、字母或数字与字母组合"
                :maxlength="16">
              </w-input>
            </div>    
            <w-button type="main">提交</w-button>
            <div class="link-group clearfix">
              <router-link to="/login" class="fr underLine">立即登录 > </router-link>
            </div>
            </div>
          </div>
        </w-form-validate>
      </div>
    </div>
    <w-login-footer></w-login-footer>
  </div>
</template>

<script>
  import { apiBackPwd, apiMsgCode, apiExistence } from 'js/api'
  export default {
    props: {
      type: {  // default, main
        type: String,
        default: 'code'
      }
    },
    data() {
      return {
        username: '',
        password: '',
        code: '',
        smsCode: '',
        msgCodeTime: 60,
        classType: this.type,
        timer: '' // 倒计时
      }
    },
    methods: {
      onGetCode() {
        if (this.msgCodeTime === 0) {
          this.classType = 'code'
          this.$refs.msgCode.innerHTML = '获取短信验证码'
          this.msgCodeTime = 60
        } else {
          this.classType = 'disabled'
          this.$refs.msgCode.innerHTML = `重新发送${this.msgCodeTime}s`
          this.msgCodeTime--
          this.timer = setTimeout(() => {
            this.onGetCode()
          }, 1000)
        }
      },
      // 获取验证码
      getCode() {
        if (this.username == '') return
        if (!/^(((13[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(14[0-9]{1}))+\d{8})$/.test(this.username)) return
        // 验证用户是否存在
        apiExistence(this.username).then((data) => {
          if (data.code == '1011') {
            // 存在，才可以获取验证码
            this.onGetCode()
            apiMsgCode(this.username).then((data) => {
              if (data.code == '200') {
                this.smsCode = data.data.smsCode
              } else {
                this.$toast(data.msg, () => {
                  clearTimeout(this.timer)
                  const oTarget = this.$refs.msgCode
                  this.classType = 'code'
                  oTarget.innerHTML = '获取短信验证码'
                })
              }
            })
            return
          } else if (data.code == '200') {
            this.$toast('亲，该手机号码未注册', () => {
              this.$router.push('./register')
            })
          }
        })
      },
      onChange() {
        if (/^(((13[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(14[0-9]{1}))+\d{8})$/.test(this.username)) {
          const oTarget = this.$refs.msgCode
          this.classType = 'code'
          oTarget.innerHTML = '获取短信验证码'
          this.msgCodeTime = 60
          clearTimeout(this.timer)
        } else {
          this.getCode()
        }
      },
      onValidate() {
        if (!/^(((13[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(14[0-9]{1}))+\d{8})$/.test(this.username)) return
        apiBackPwd(this.username, md5(this.password), this.smsCode).then((data) => {
          if (data.code == '200') {
            sessionStorage.setItem('mobile', this.username)
            this.$toast('密码重置成功，请重新登录', () => {
              // 清空当前页的用户，密码，验证码
              this.username = ''
              this.password = ''
              this.smsCode = ''
              this.code = ''
              clearTimeout(this.timer)
              this.$router.push('./login')
            })
          } else {
            this.smsCode = ''
            this.$toast(data.msg)
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .forget-wrap {
    .w-input {
      .error-tip {
        margin-top: -17px!important;
      }
    }
  }
</style>

<style lang="scss">
  @import '../scss/_var.scss';
  $fontSize: 14px;
  h1 {
    img {
      margin: 42px auto 24px 192px;
    }
  }
  .m-login {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    min-width: 1230px;
    z-index: 20;
    background: #f6f6f6;
  }
  .main-wrap {
    .main-img {
      height: 532px;
    }
  }
  .forget-container {
    position: absolute;
    width: 1000px;
    height: 532px;
    top: 110px;
    left: 0;
    right: 0;
    margin: 0 auto;
    .forget-wrap {
      width: 361px;
      height: 380px;
      margin: 76px 0;
      .main-pad{
        padding: 0 41px;
        height: inherit;
        h3 {
          font-size: 24px;
          color: $color-dark;
          padding: 40px 0 46px 0;
        }
        background: $color-white;
        .input-box {
          &.phone, &.password {
            margin-bottom: 20px;
          }
          &.code {
            margin-bottom: 20px;
            .input-pwd {
              width: 130px;
            }
            .btnGetCode {
              width: 130px;
              background: $color-main;
              color: $color-white;
            }
          }
        }
        .main {
          width: 100%;
          font-size: 18px;
          margin-bottom: 20px;
        }
        .underLine {
          text-decoration: underline;
        }
      }
    }
  }
</style>